<template>
  <div class="buyOrder_wrap">
    <div class="order_navs">
      <div class="order_nav" :class="{'active': activeIndex === index}" v-for="(item, index) in navs" :key="index" @click="navToggle(index)">
        {{item}}
      </div>
    </div>
    <div class="add_wrap" ref="scrollBox" >
      <!-- Purchase -->
      <div class="order_lists" v-if="activeIndex===0" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!orderList.length && isRequest">No data</li>
        <div class="order_list" v-for="(item, index) in orderList" :key="index" v-else>
          <div class="top_box">
            <div class="top_left">
              <img :src="item.avatar" alt="Head portrait">
              <span class="nick">{{item.username}}</span>
            </div>
            <span class="create_time">{{item.updated_at}}</span>
          </div>
          <div class="content_box">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Amount (CNY)</span>
            </div>
            <div class="content_right">
              <div class="upload withdraw" @click="retractOrder(index)">Withdrawal</div>
            </div>
          </div>
        </div>
      </div>
      <!-- In the transaction -->
      <div class="order_lists" v-if="activeIndex===1" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!orderList.length && isRequest">No data</li>
        <div class="order_list" v-for="(item, index) in orderList" :key="index" @click="goDetail(item.type, index)" v-else>
          <div class="top_box">
            <div class="top_left">
              <img :src="item.avatar" alt="Head portrait">
              <span class="nick">{{item.username}}</span>
            </div>
            <span class="create_time">{{item.updated_at}}</span>
          </div>
          <div class="content_box">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Amount (CNY)</span>
            </div>
            <div class="content_right">
              <div class="comfiring" v-if="item.type===3">Seller confirmation</div>
              <div class="check" v-if="item.type===3">View trade notes</div>
              <div class="comfire" v-if="item.type===2">
                <span class="time">{{item.count}}</span>
              </div>
              <div class="upload" v-if="item.type===2">Upload voucher</div>
            </div>
          </div>
        </div>
      </div>
      <!-- Freezing -->
      <div class="order_lists" v-if="activeIndex===2" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!orderList.length && isRequest">No data</li>
        <div class="order_list" v-for="(item, index) in orderList" :key="index" @click="goDetail(item.type, index)" v-else>
          <div class="top_box">
            <div class="top_left">
              <img :src="item.avatar" alt="Head portrait">
              <span class="nick">{{item.username}}</span>
            </div>
            <span class="create_time">{{item.updated_at}}</span>
          </div>
          <div class="content_box">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Amount (CNY)</span>
            </div>
            <div class="content_right">
              <div class="comfiring">Seller's complaint</div>
            </div>
          </div>
        </div>
      </div>
      <!-- Completed -->
      <div class="order_lists" v-if="activeIndex===3" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!orderList.length && isRequest">No data</li>
        <div class="order_list" v-for="(item, index) in orderList" :key="index" @click="goDetail(item.type, index)" v-else>
          <div class="top_box">
            <div class="top_left">
              <img :src="item.avatar" alt="Head portrait">
              <span class="nick">{{item.username}}</span>
            </div>
            <span class="create_time">{{item.updated_at}}</span>
          </div>
          <div class="content_box">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Amount (CNY)</span>
            </div>
            <div class="content_right">
              <div class="comfiring" v-if="item.type === 8">Have been evaluated</div>
              <div class="value_style" v-if="item.type === 4">Not appraised</div>
              <div class="upload" v-if="item.type === 4">To evaluate</div>
            </div>
          </div>
        </div>
      </div>
      <!-- Failed -->
      <div class="order_lists" v-if="activeIndex===4" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!orderList.length && isRequest">No data</li>
        <div class="order_list" v-for="(item, index) in orderList" :key="index" @click="goDetail(item.type, index)" v-else>
          <div class="top_box">
            <div class="top_left">
              <img :src="item.avatar" alt="Head portrait">
              <span class="nick">{{item.username}}</span>
            </div>
            <span class="create_time">{{item.updated_at}}</span>
          </div>
          <div class="content_box">
            <div class="content_left">
              <p class="price">{{item.point}}</p>
              <span class="price_txt">Amount (CNY)</span>
            </div>
            <div class="content_right">
              <div class="comfiring">Transaction failure</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'buyOrder',
  data () {
    return {
      // Top navigation bar
      navs: ['Purchase', 'Transaction', 'Freezing', 'Completed', 'Failed'],
      // Navigate
      activeIndex: 0,
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true, // Do you have more data?
      orderList: []
    };
  },
  beforeMount () {
    this.activeIndex = Number(this.$route.query.navIndex);
  },
  methods: {
    // Navigation switch
    navToggle (index) {
      if (index === this.activeIndex) return false;
      clearInterval(this.timer);
      this.$router.replace({path: 'buyOrder', query: {navIndex: index}});
      this.activeIndex = index;
      this.page = 1;
      this.orderList = [];
      this.getInfo();
    },
    // Withdrawal of order interface
    retractOrder (index) {
      this.Modal('Tips', 'Are you sure you want to withdraw the order? After withdrawal, the amount will be returned to the original account.。', ['cancel', 'Sure'], () => {
        this.axios.post('index/buyandbuy/che_buy ', {
          ids: this.orderList[index].id
        }).then(({data}) => {
          if (data.status === 200) {
            this.Toast('Revocation of success');
            this.orderList.splice(index, 1);
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // Count down
    counTime () {
      this.timer = setInterval(() => {
        for (let i = 0; i < this.orderList.length; i++) {
          if (this.orderList[i].date > 0) {
            this.orderList[i].date--;
            let h = parseInt(this.orderList[i].date / 60 / 60 % 24);
            if (h < 10) h = '0' + h;
            let m = parseInt(this.orderList[i].date / 60 % 60);
            if (m < 10) m = '0' + m;
            let s = parseInt(this.orderList[i].date % 60);
            if (s < 10) s = '0' + s;
            this.$set(this.orderList[i], 'count', h + ':' + m + ':' + s);
          } else {
            this.$set(this.orderList[i], 'count', '00:00:00');
            clearInterval(this.timer);
            this.$router.go(-1);
            setTimeout(() => {
              this.$router.push('/myOrder/buyOrder?navIndex=4');
            }, 50);
          }
        }
      }, 1000);
    },
    // Order details
    goDetail (type, index) {
      if (this.activeIndex === 1) {
        if (type === 3) {
          this.$router.push({path: '/orderConfirmed', query: {id: this.orderList[index].id, type: type}});
        } else {
          this.$router.push({path: '/buyUnpaid', query: {id: this.orderList[index].id, type: type}});
        }
      } else if (this.activeIndex === 2) {
        this.$router.push({path: '/orderCongeal', query: {id: this.orderList[index].id}});
      } else if (this.activeIndex === 3) {
        if (type === 4 || type === 8) {
          this.$router.push({path: '/buyEvaluate', query: {id: this.orderList[index].id, type: type}});
        };
      } else if (this.activeIndex === 4) {
        this.$router.push({path: '/orderLose', query: {id: this.orderList[index].id}});
      }
    },
    // Order list interface
    getInfo () {
      this.canRequest = false;
      this.axios.post('index/transabuy/buy_select', {
        type: this.activeIndex + 1,
        page: this.page
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          let resObj;
          resObj = data.data;
          if (this.activeIndex === 1 && data.data[0].type !== 3) {
            this.counTime(); // Count down
          }
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          this.orderList = this.orderList.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData) this.getInfo();
    };
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .buyOrder_wrap{
    height:100%;
    .order_navs{
      width:100%;
      height:80px;
      line-height:80px;
      display:flex;
      background-color:#f5f5f5;
      .order_nav{
        flex:1;
        text-align:center;
        color:#999;
        font-size: 28px;
        background: #fff;
        &.active{
          color:#ff9e27;
        }
      }
    }
    .add_wrap {
      box-sizing: content-box;
      height: calc(100%-80px);
      overflow-y: scroll;
      .order_lists {
        padding: 0 30px;
        // height: calc(100% - 90px);
        box-sizing: content-box;
        // overflow-y: scroll;
        .order_list {
          background: #fff;
          border-radius: 15px;
          margin: 20px 0;
          box-shadow: 0px 0px 10px 10px #eff0f2;
          .top_box {
            height: 94px;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1Px solid #e5e5e5;
            .top_left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
              img {
                width: 64px;
                height: 64px;
                border-radius: 50%;
              }
              .nick {
                font-size: 28px;
                color: #666;
                padding-left: 15px;
              }
            }
            .create_time {
              font-size: 24px;
              color: #999;
            }
          }
          .content_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 150px;
            padding-left: 75px;
            padding-right: 30px;
            .content_left {
              text-align: left;
              .price {
                font-size: 30px;
                font-weight: bold;
                color: #fe6e3a;
              }
              .price_txt {
                font-size: 24px;
                color: #999999;
                display: block;
                margin-top: 15px;
              }
            }
            .content_right {
              width: 40%;
              text-align: center;
              .comfiring {
                font-size: 24px;
                color: #666666;
              }
              .check {
                width: 100%;
                height: 56px;
                border-radius: 10px;
                border: 1Px solid #cccccc;
                text-align: center;
                line-height: 56px;
                font-size: 26px;
                color: #999999;
                margin: 0 auto;
                margin-top: 28px;
              }
              .comfire {
                font-size: 24px;
                color: #ff584b;
              }
              .value_style {
                font-size: 24px;
                color: #666666;
              }
              .upload {
                width: 100%;
                height: 56px;
                border-radius: 10px;
                border: 1Px solid #ff9e27;
                text-align: center;
                line-height: 56px;
                font-size: 26px;
                color: #ff9e27;
                margin: 0 auto;
                margin-top: 28px;
                &.withdraw {
                  margin-top: 0;
                }
              }
            }
          }
        }
        .public_none_data {
          position: absolute;
          left: 0;
          right: 0;
          top: 30%;
          bottom: 0;
          margin: auto;
        }
      }
    }
  }
</style>
